<template>
  <div class="mvDetails w">
    <el-empty
      description="正在加载请稍等~~~"
      v-if="Object.keys(info).length === 0"
    ></el-empty>
    <div class="top" v-else>
      <div class="top_left">
        <video :poster="info.cover" preload="auto" :src="url" controls></video>
        <h2>
          {{ info.name }}
          <span>{{ info.artistName }}</span>
        </h2>
        <div class="top_left_time">
          发布: &nbsp;{{ info.publishTime }} &nbsp;&nbsp;&nbsp; 播放: &nbsp;{{
            formatPlayCount(info.playCount)
          }}次
        </div>
        <div class="top_left_tag">
          <el-tag
            v-for="item in info.videoGroup"
            :key="item.id"
            type="info"
            effect="plain"
            >{{ item.name }}</el-tag
          >
        </div>
        <div class="top_left_other">
          <!-- 店在哪 -->
          <el-button size="small" round>
            <i class="iconfont icon-chakandianzan"></i>
            赞({{ formatPlayCount(likedCount) }})
          </el-button>
          <!-- 收藏 -->
          <el-button size="small" round>
            <i class="iconfont icon-shoucang"></i>
            收藏({{ formatPlayCount(info.subCount) }})
          </el-button>
          <!-- 分享 -->
          <el-button size="small" round>
            <i class="iconfont icon-fenxiang"></i>
            分享({{ formatPlayCount(shareCount) }})
          </el-button>
          <!-- 评论 -->
          <el-button size="small" round @click="clickComment">
            <i class="iconfont icon-pinglun"></i>
            评论({{ formatPlayCount(commentCount) }})
          </el-button>
        </div>

        <!-- 评论相关的东西 -->
        <GlobalComment
          :type="1"
          :id="info.id"
          v-if="Object.keys(info).length !== 0"
          class="comment"
        />
      </div>
      <div class="top_right">
        <h3>相关推荐</h3>
        <div class="top_right_item" v-for="item in simiMv" :key="item.id">
          <div class="top_right_item_img">
            <GlobalImageDeep
              :url="item.cover"
              :imgWidth="100"
              :imgHeight="100"
            />
            <!-- 播放按钮 -->
            <GlobalPlayMask
              :maskWidth="46"
              :maskHeight="46"
              @maskClick="toMvDetailsPage(item.id)"
            />
          </div>
          <div class="top_right_item_info">
            <p class="one_txt_cut">{{ item.name }}</p>
            <i>{{ item.artistName }}</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMvDetails,
  getMvUrl,
  getSimiMv,
  getMvDetailInfo,
} from "../../../../api/mvDetailsApi";
import { getCount } from "../../../../utils/format";
export default {
  name: "mvDetails",
  components: {},
  data() {
    return {
      info: {},
      url: "",
      simiMv: [],
      likedCount: 0,
      shareCount: 0,
      commentCount: 0,
    };
  },
  created() {
    this.getMvDetailsMethods();
    this.getMvDetailInfoMethods();
  },
  methods: {
    async getMvDetailsMethods() {
      let result = await getMvDetails(this.$route.params.id);
      if (result.code === 200) {
        this.info = result.data;
        let urlResuly = await getMvUrl(this.$route.params.id);
        if (urlResuly.code === 200) {
          this.url = urlResuly.data.url;
        }
        let simiMvResult = await getSimiMv(this.$route.params.id);
        if (simiMvResult.code === 200) {
          this.simiMv = simiMvResult.mvs;
        }
      }
      // console.log(result);
    },
    // 获取 点赞 评论 收藏 的数量
    async getMvDetailInfoMethods() {
      let result = await getMvDetailInfo(this.$route.params.id);
      if (result.code === 200) {
        this.likedCount = result.likedCount;
        this.shareCount = result.shareCount;
        this.commentCount = result.commentCount;
      }
    },
    clickComment() {
      this.$utils.scrollTop(document.querySelector(".comment").offsetTop, 200);
    },
    // 格式化播放次数
    formatPlayCount(playCount) {
      return getCount(playCount);
    },
    toMvDetailsPage(id) {
      this.$router.push(`/mvDetails/${id}`);
      console.log("mv点击");
    },
  },
  watch: {
    "$route.params.id"(newValue, oldValue) {
      // console.log(newValue, oldValue);
      this.getMvDetailsMethods();
      this.getMvDetailInfoMethods();
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.mvDetails {
  padding: 30px 0;
  color: #000000;
  font-size: 14px;
  video {
    // width: 800px;
    // width: 100%;
    height: 450px;
  }
  .top {
    display: flex;
    // height: 450px;
    .top_left {
      h2 {
        margin: 15px 0;
        span {
          color: #999999;
          font-size: 14px;
          font-weight: normal;
          &:hover {
            color: @globalColor;
            cursor: pointer;
          }
        }
      }
      .top_left_time {
        color: #999999;
      }
      .top_left_tag {
        margin: 10px 0;
        /deep/ .el-tag {
          height: 22px;
          line-height: 22px;
          margin-right: 5px;
        }
      }
      .top_left_other {
        padding: 15px 0;
      }
    }
    .top_right {
      width: 400px;
      // background: red;
      padding-left: 40px;
      h3 {
        margin-bottom: 20px;
      }
      .top_right_item {
        display: flex;
        align-items: center;
        height: 100px;
        margin-bottom: 15px;
        // background-color: aqua;
        /deep/ .el-image {
          img {
            border-radius: 8px;
          }
        }
        .top_right_item_img {
          position: relative;
          width: 100px;
          margin-right: 20px;
          &:hover {
            /deep/ .playMask .play {
              display: block;
              cursor: pointer;
            }
          }
        }
        .top_right_item_info {
          p {
            font-size: 16px;
            color: #333333;
            margin-bottom: 10px;
            &:hover {
              color: @globalColor;
              cursor: pointer;
            }
          }
          i {
            color: #999999;
            &:hover {
              color: @globalColor;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
